<template>
  <div class="banner">
    <div class="item">
      <img :src="images[currentIndex]" />
    </div>
    <div class="page" v-if="this.images.length > 1">
      <span
        v-for="(item, index) in images"
        :key="index"
        @click="gotoPage(index)"
        :class="{ current: currentIndex == index }"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        require("../../public/images/tag-2/b01.jpg"),
        require("../../public/images/tag-2/b02.jpg"),
        require("../../public/images/tag-2/b03.jpg"),
      ],
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
    };
  },
  methods: {
    gotoPage(index) {
      this.currentIndex = index;
    },
    autoplay(){
      this.currentIndex++;
      if(this.currentIndex==3){
        this.currentIndex=0
      }
    },
  runInv() {
    // this.timer = setInterval(() => {
    //   this.gotoPage(this.nextIndex);
    // }, 1000);
    setInterval(this.autoplay,3000)
  },

  }
};
</script>

<style scoped>
/* ul li {
  list-style: none;
  float: left;
  width: 30px;
  height: 40px;

  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
ul li > div {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: #ff6700 1px solid;
} */

.banner {
  max-width: 100%;
  margin: 0 auto;
  margin-top: 60px;
}
.banner img {
  width: 100%;
  display: block;
}
.banner .page {
  position: absolute;
  right: 876.5px;
  bottom: -100px;
}
.banner .page ul {
  float: right;
}
.current {
  color: #ff6700;
}
</style>